<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>

<body>
        <script type="text/javascript">
                window._AMapSecurityConfig = {
                        securityJsCode: 'yourcode',
                }
        </script>
        <script src="https://webapi.amap.com/loader.js"></script>
        <div id="container"></div>


        <script type="text/javascript">
                // 地图实现
                AMapLoader.load({
                        key: "yourcode", // 申请好的Web端开发者Key，首次调用 load 时必填
                        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                        plugins: ['AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                        AMapUI: { // 是否加载 AMapUI，缺省不加载
                                "version": '1.1', // AMapUI 版本
                                "plugins": ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
                        },
                        Loca: { // 是否加载 Loca， 缺省不加载
                                "version": '2.0' // Loca 版本
                        }
                }).then((AMap) => {
                        // JS API加载完成后获取AMap对象
                        var map = new AMap.Map('container', {
                                center: [118.787326, 32.053766],
                                zoom: 13 //地图显示的缩放级别
                        });
                })


        </script>
</body>

</html>